<template>
<div>
  <div class="title">
    热销推荐
  </div>
  <ul>
    <router-link
      tag="li"
      class="item border-bottom"
      v-for="item of list"
      :key="item.id"
      :to="'/detail/'+item.id">
      <img class="item-img" :src="item.imgUrl">
      <div class="item-info">
        <p class="item-title">{{item.title}}</p>
        <p class="item-desc">{{item.desc}}</p>
        <button class="item-button">查看详情</button>
      </div>
    </router-link>
  </ul>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}

</script>

<style  lang="stylus" scoped>
.title
   margin-top .1rem
   padding-top .3rem
   padding-bottom .3rem
   color #333333
   background #eee
   text-indent .2rem
  .item
    display flex
    height 1.9rem
  .item-img
    width 2rem
    height 1.7rem
    padding .1rem
  .item-info
    flex 1
    padding .1rem
    min-width 0
   .item-title
    line-height .54rem
    font-size .32rem
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
  .item-desc
   line-height .4rem
   color #ccc
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
  .item-button
   line-height .44rem
   margin-top .16rem
   background .2rem
   padding 0 .2rem
   background #ff9300
   border-radius .06rem
   color #fff
</style>
